<template>
	<div class="login">
		<div class="container">
			<div class="container-left"></div>
			<div class="container-right">
				<div class="title">登录密码</div>
				<div class="tip">
					尊敬的用户，您好！欢迎登录使用！平台已为您准备好丰富的资源和优质的服务，我们期待与您携手共创美好未来。
				</div>
				<div class="input">
					<el-form label-width="auto" label-position="top">
						<el-form-item label="登录密码">
							<el-input v-model="password" type="password" placeholder="请输入登录密码" />
						</el-form-item>
					</el-form>
				</div>
				<div class="input-tip">*登录密码由后台提供</div>
				<div class="button" @click="handleLogin">登录</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'
	import {
		loginAPI
	} from '@/api/index'
	import {
		ElMessage
	} from 'element-plus'

	const $router = useRouter()

	const password = ref('')

	const handleLogin = () => {
		if (password.value) {
			loginAPI({
				password: password.value
			}).then(res => {
				if (res.code == 1) {
					localStorage.setItem('token', res.data.userinfo.token)
					$router.push('/home')
				} else {
					ElMessage.warning(res.msg)
				}
			})
		} else {
			ElMessage.warning('请输入密码')
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100%;
		height: 100vh;
		background: url('@/assets/background.png') no-repeat;
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;

		.container {
			display: flex;
			box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
			border-radius: 23px;
			overflow: hidden;

			&-left {
				width: 41vw;
				height: 71vh;
				background: url('@/assets/left.png') no-repeat;
				background-size: cover;
			}

			&-right {
				height: 71vh;
				padding: 0 8vw;
				background: #fff;

				.title {
					font-size: 48px;
					color: #000;
					font-weight: bold;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-top: 8vh;

					&::after {
						content: '';
						display: block;
						width: 71px;
						height: 8px;
						background: #309BFE;
						border-radius: 4px;
						margin-top: 19px;
					}
				}

				.tip {
					width: 28vw;
					text-align: center;
					font-size: 14px;
					color: #000;
					margin-top: 15px;
				}

				.input {
					margin: 7vh 0 2vh 0;

					::v-deep .el-input__wrapper {
						height: 60px;
						background: #F5F5F5;
						padding: 0 20px !important;
					}

					&-tip {
						font-size: 14px;
						color: #6E6E6E;
					}
				}

				.button {
					width: 31vw;
					height: 5vh;
					background: linear-gradient(315deg, #2F9AFE 0%, #A9FEFC 100%);
					border-radius: 8px;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					font-size: 20px;
					margin-top: 5vh;
					cursor: pointer;
				}
			}
		}
	}
</style>